
import {
  AmbientLight,
  AxesHelper,
  BoxGeometry,
  CameraHelper,
  Color,
  Mesh,
  MeshStandardMaterial,
  OrthographicCamera,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

let WIDTH = window.innerWidth;
let HEIGHT = window.innerHeight;
let ratio = WIDTH / HEIGHT;
let frustumSize  = 600;
let pCamera = new PerspectiveCamera(75, 0.5 * ratio, 1, 1000);
// let oCamera = new OrthographicCamera();
pCamera.position.set(5, 5, 5);
let scene = new Scene();
scene.background = new Color("#fff");

let cameraPerspectiveHelper = new CameraHelper(pCamera);
scene.add(cameraPerspectiveHelper);

let ambientLight = new AmbientLight("#fff", 1);
scene.add(ambientLight);

let boxGeo = new BoxGeometry(3, 3, 3);
let boxMat = new MeshStandardMaterial({ color: "#f00" });
let boxMesh = new Mesh(boxGeo, boxMat);
boxMesh.position.set(0, 0, 0);
scene.add(boxMesh);

let axesHelper = new AxesHelper(10);
scene.add(axesHelper);

let renderer = new WebGLRenderer({
  antialias: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.append(renderer.domElement);
let control = new OrbitControls(pCamera, renderer.domElement);

(function render() {
  requestAnimationFrame(render);

  renderer.setViewport(0, 0, WIDTH / 2, HEIGHT);
  renderer.render(scene, pCamera);
})();
